<script setup lang="ts">
definePageMeta({ layout: "admin" });

const showUserDialog = ref(false);
const editUser = ref<User | null>(null);
const delUser = ref<AdminActionUser | null>(null);
const passUser = ref<AdminActionUser | null>(null);
const freezeUser = ref<AdminActionUser | null>(null);
const unfreezeUser = ref<AdminActionUser | null>(null);
const unactiveUser = ref<AdminActionUser | null>(null);

const handleToggleShowUserDialog = () => {
  showUserDialog.value = !showUserDialog.value;
};

const { $get, $del } = use$fetch();
const { msg } = useStatus();

const pagination = ref<Pagination<User> | null>(null);
const list = computed(() => pagination.value?.data);

const page = useQueryPage();
const loadData = async () => {
  await $get<Pagination<User>>(
    "/admin/user",
    (v) => {
      pagination.value = v;
      return v;
    },
    { page }
  );
};

const handleDeleteUser = async () => {
  await $del<AffResp>(`/admin/user/${delUser.value?.id}`, (v) => {
    delUser.value = null;
    msg.value = "删除成功";
    loadData().then();
    return v;
  });
};

await loadData();
</script>

<template>
  <AdminToolbar
    @add="
      () => {
        editUser = null;
        handleToggleShowUserDialog();
      }
    "
  >
    <template #title>用户管理</template>
  </AdminToolbar>

  <section class="my-6 bg-white p-3 rounded-md shadow-md lg:p-6">
    <div class="overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th>邮箱</th>
            <th>状态</th>
            <th>注册时间</th>
            <th>管理</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="list" v-for="i in list" :key="i.id">
            <td>{{ i.email }}</td>
            <td>
              <div
                v-if="i.status === 'Actived'"
                class="bg-green-700 border border-green-800 text-white px-1 py-0.5 rounded text-xs inline-block"
              >
                正常
              </div>
              <div
                v-if="i.status === 'Pending'"
                class="bg-gray-700 border border-gray-800 text-white px-1 py-0.5 rounded text-xs inline-block"
              >
                待审核
              </div>
              <div
                v-if="i.status === 'Freezed'"
                class="bg-orange-700 border border-orange-800 text-white px-1 py-0.5 rounded text-xs inline-block"
              >
                已冻结
              </div>
            </td>
            <td>
              <div class="text-xs text-wrap">{{ i.dateline }}</div>
            </td>
            <td>
              <div class="flex justify-start items-center gap-x-1">
                <button
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-cyan-600 text-white flex justify-start items-center gap-x-1"
                  @click="
                    () => {
                      showUserDialog = true;
                      editUser = { ...i };
                    }
                  "
                >
                  <Icon name="uil:edit-alt" />
                  <div class="hidden lg:block">修改</div>
                </button>

                <button
                  v-if="i.status === 'Actived'"
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-amber-600 text-white flex justify-start items-center gap-x-1"
                  @click="unactiveUser = { ...i }"
                >
                  <Icon name="uil:lock-slash" />
                  <div class="hidden lg:block">取消激活</div>
                </button>

                <button
                  v-if="i.status === 'Actived'"
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-purple-600 text-white flex justify-start items-center gap-x-1"
                  @click="freezeUser = { ...i }"
                >
                  <Icon name="uil:adjust" class="rotate-45" />
                  <div class="hidden lg:block">冻结</div>
                </button>

                <button
                  v-if="i.status === 'Pending'"
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-green-600 text-white flex justify-start items-center gap-x-1"
                  @click="passUser = { ...i }"
                >
                  <Icon name="uil:check-circle" />
                  <div class="hidden lg:block">通过</div>
                </button>

                <button
                  v-if="i.status === 'Freezed'"
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-blue-600 text-white flex justify-start items-center gap-x-1"
                  @click="unfreezeUser = { ...i }"
                >
                  <Icon name="uil:redo" />
                  <div class="hidden lg:block">解冻</div>
                </button>

                <button
                  type="button"
                  class="px-1 py-0.5 text-sm border rounded bg-red-600 text-white flex justify-start items-center gap-x-1"
                  @click="delUser = { ...i }"
                >
                  <Icon name="uil:trash" />
                  <div class="hidden lg:block">删除</div>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="flex flex-col items-end my-3">
      <PaginationBar
        :pagination="(pagination  as PaginationMeta)"
        v-if="pagination"
      />
    </div>
  </section>

  <AdminUserInput
    :user="editUser"
    v-if="showUserDialog"
    @click="
      () => {
        handleToggleShowUserDialog();
        editUser = null;
      }
    "
    @cancel="
      () => {
        handleToggleShowUserDialog();
        editUser = null;
      }
    "
    @ok="
      async () => {
        handleToggleShowUserDialog();
        editUser = null;
        await loadData();
      }
    "
  />
  <AdminDelDialog
    :id="delUser?.id"
    v-if="delUser"
    title="删除用户"
    :ext="delUser.email"
    @click="delUser = null"
    @cancel="delUser = null"
    @ok="handleDeleteUser"
  />
  <AdminUserFreezeDialog
    :user="freezeUser"
    v-if="freezeUser"
    @click="freezeUser = null"
    @cancel="freezeUser = null"
    @ok="
      async () => {
        msg = '冻结成功';
        freezeUser = null;
        await loadData();
      }
    "
  />
  <AdminUserUnfreezeDialog
    :user="unfreezeUser"
    v-if="unfreezeUser"
    @click="unfreezeUser = null"
    @cancel="unfreezeUser = null"
    @ok="
      async () => {
        msg = '解冻成功';
        unfreezeUser = null;
        await loadData();
      }
    "
  />
  <AdminUserPassDialog
    :user="passUser"
    v-if="passUser"
    @click="passUser = null"
    @cancel="passUser = null"
    @ok="
      async () => {
        msg = '通过成功';
        passUser = null;
        await loadData();
      }
    "
  />
  <AdminUserUnactiveDailog
    :user="unactiveUser"
    v-if="unactiveUser"
    @click="unactiveUser = null"
    @cancel="unactiveUser = null"
    @ok="
      async () => {
        msg = '取消成功';
        unactiveUser = null;
        await loadData();
      }
    "
  />
</template>
